<template>
  <div class="warp">
    <div class="warp_auto">
      <div class="warp_top">
        <div class="jiansuo-box">
          <span>住院号：</span>
          <el-input
            v-model="visitId"
            class="input"
            clearable
            placeholder="请输入住院号"
          />
        </div>

        <div class="jiansuo-box">
          <span>病人姓名：</span>
          <el-input
            v-model="visitIdname"
            clearable
            class="input"
            placeholder="请输入病人姓名"
          />
        </div>

        <div class="jiansuo-box">
          <span>性别：</span>
          <el-select
            v-model="sexVal"
            placeholder="请选择"
            clearable
            class="input"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </div>

        <div class="jiansuo-box">
          <span>当前状态：</span>
          <el-select
            v-model="current"
            placeholder="请选择"
            clearable
            class="input"
          >
            <el-option
              v-for="item in optioncurrent"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="btn"
            @click="btn"
          >检索</el-button
          >
        </div>
      </div>

      <div style="display: flex">
        <el-card shadow="hover" style="width: 100%">
          <el-table
            :data="arr"
            stripe
            :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
          >
            <el-table-column
              label="序号"
              fixed
              align="center"
              type="index"
            />
            <el-table-column
              label="住院号"
              prop="visit_id"
              align="center"
            />
            <el-table-column
              label="姓名"
              prop="name"
              align="center"
            />
            <el-table-column label="性别"  align="center">
              <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                  scope.row.sex === "2" ? "女" : "男"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="年龄" prop="age" align="center" />
            <el-table-column label="当前状态"  align="center">
              <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                  scope.row.flag === "0" && scope.row.exit_type !== ""
                    ? scope.row.exit_type
                    : "出科"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleData(scope.row, scope.$index)"
                >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card style="width: 34%;margin-left: 1%" v-if="showControlFlag">
          <div >
            <div>患者姓名：{{ patientName }}</div>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.dvtFlag"
            >是否进行深静脉血栓(DVT)预防治疗
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.bunble3hFlag"
            >是否进行感染性休克3h集束化治疗(bundle)完成
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.bunble6hFlag"
            >是否进行感染性休克6h集束化治疗(bundle)完成
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.vapFlag"
            >是否进行呼吸机相关性肺炎(VAP)的预防
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-model="info.bak1"
            >是否尿管相关感染
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.bak2"
            >是否血管相关感染
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.bak3"
            >是否使用抗菌药物
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.bak4"
            >是否抗菌药物病原体送检
            </el-checkbox>
            <el-checkbox
              style="display: block; padding-top: 15px"
              true-label="1"
              false-label="2"
              v-on:click.stop.native
              v-model="info.bak5"
            >是否感染休克
            </el-checkbox>
            <el-button
              type="primary"
              class="btn"
              style="margin-top: 35px"
              @click="saveData"
            >保存</el-button
            >
          </div>
        </el-card>
      </div>


      <div class="paging">
        <el-pagination
          :current-page="start"
          :page-size="PageSize"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import {
  patientgetList,
  deparqueryList,
  patientControlinsert,
  patientControlupdate,
  patientControlgetData,
} from "@/api/table";
import {Message} from "element-ui";

export default {
  data() {
    return {
      showControlFlag:false,//是否显示质控页面
      patientName:"",//患者名称
      enterStartTime: "",
      exitStartTime: "",
      visitId: "",
      visitIdname: "",
      info: {
        bunble3hFlag: "",
        bunble6hFlag: "",
        dvtFlag: "",
        vapFlag: "",
        bak1:"",
        bak2:"",
        bak3:"",
        bak4:"",
        bak5:"",
        patientId: "",
        id: "",
      },
      options: [
        {
          id: "1",
          value: "1",
          label: "男",
        },
        {
          id: "2",
          value: "2",
          label: "女",
        },
      ],
      optioncurrent: [
        {
          id: "0",
          value: "0",
          label: "出科",
        },
        {
          id: "1",
          value: "1",
          label: "在科",
        },
      ],
      graduateoptions: [
        {
          id: "4",
          value: "转科",
          label: "转科",
        },
        {
          id: "5",
          value: "出院",
          label: "出院",
        },
        {
          id: "6",
          value: "死亡",
          label: "死亡",
        },
        {
          id: "7",
          value: "放弃",
          label: "放弃",
        },
        {
          id: "8",
          value: "转院",
          label: "转院",
        },
      ],
      value: "",
      sexVal: "",
      current: "",
      graduate: "",
      arr: [],
      listarr: [],
      valuequ: "",
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
    };
  },
  created() {
  },
  mounted() {
    this.list(this.PageSize, this.start);
  },
  methods: {
    // 搜索按钮
    btn() {
      this.start = 1;
      this.list(this.PageSize, this.start);
    },
    //保存质控相关数据
    saveData() {
      // console.log(this.info);
      this.info.createTime=null;
      if (this.info.id=="") {
        //新增
        patientControlinsert(this.info).then((res) => {
          if(res.code==200){
            this.getDataByPatientId(this.info.patientId);
            Message({
              message: "保存成功",
              type: "sucess",
              duration: 1500,
            });
          }else{
            Message({
              message: "保存失败",
              type: "warning",
              duration: 1500,
            });
          }
        })
      }else{
        //修改
        patientControlupdate(this.info).then((res) => {
          if (res.code == 200) {
            this.getDataByPatientId(this.info.patientId);
            Message({
              message: "保存成功",
              type: "success",
              duration: 1500,
            });
          } else {
            Message({
              message: "保存失败",
              type: "warning",
              duration: 1500,
            });
          }
        })
      }
    },
    //赋值质控数据
    getDataByPatientId(patientId){
      patientControlgetData({ patientId: patientId}).then((res) => {
        if (res.code==200 && res.data!=null) {
          this.info = res.data;
        } else {
          this.info = {
            bunble3hFlag: "",
            bunble6hFlag: "",
            dvtFlag: "",
            vapFlag: "",
            bak1:"",
            bak2:"",
            bak3:"",
            bak4:"",
            bak5:"",
            patientId: patientId,
            id: "",
            createTime:"",
          };
        }
      });
    },
    //选中病人
    handleData(row, index) {
      this.clearData();
      this.patientName = row.name;
      this.showControlFlag = true;
      this.info.patientId = row.id;
      this.getDataByPatientId(this.info.patientId);
    },

    //清空数据
    clearData(){
      this.info = {
        bunble3hFlag: "",
        bunble6hFlag: "",
        dvtFlag: "",
        vapFlag: "",
        bak1:"",
        bak2:"",
        bak3:"",
        bak4:"",
        bak5:"",
        patientId: "",
        id: "",
      };
    },
    //查询患者列表
    list(pageSize, start) {
      patientgetList({
        visitId: this.visitId,
        name: this.visitIdname,
        sex: this.sexVal === "" ? null : Number(this.sexVal),
        enterStartTime: this.enterStartTime[0],
        enterEndTime: this.enterStartTime[1],
        exitStartTime: this.exitStartTime[0],
        exitEndTime: this.exitStartTime[1],
        flag: this.current === "" ? null : Number(this.current),
        exitType: this.graduate,
        departmentCode: this.value,
        toDepartmentCode: this.valuequ,
        size: pageSize,
        start: start,
      }).then((res) => {
        this.arr = res.data;
        this.totalCount = res.totalCount;
      });
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.list(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      this.visitId = "";
      this.visitIdname = "";
      // 改变默认的页数
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.list(this.PageSize, (this.start = val));
    }
  },
};
</script>
<style lang="scss" scoped>

</style>
